<template>
	<view class="employment">
		<!-- 导航占位 -->
		<view class="nav">
			<text>智能选岗</text>
			<text>综合</text>
			<text>课程</text>
			<text class="active">大厂就业</text>
			<text>题库</text>
			<text>测评</text>
			<text>简历模版</text>
		</view>
		
		<!-- 轮播(图片或视频) -->
		<view class="employmentSwiper">
			<MediaSwiper
			  :media-list="data.mediaList"
			  :autoplay="true"
			  :interval="3000"
			  :auto-play-video="true"
			  @media-click="handleMediaClick"
			/>
		</view>
		
		<!-- 四块简历模版 -->
		<!-- 简历模版-标题区 -->
		<view class="templateTitle" @click="gotToTemplateList()">
			<text class="templateTitle1">简历模版</text>
			<text class="templateTitle2">查看更多&rarr;</text>
		</view>
		
		<!-- 内容图片列表区 -->
		<view class="template">
			<image class="templateImage" src="../../static/employment/templateBg1.png" mode="aspectFit"></image>
			<image class="templateImage" src="../../static/employment/templateBg2.png" mode="aspectFit"></image>
			<image class="templateImage" src="../../static/employment/templateBg3.png" mode="aspectFit"></image>
			<image class="templateImage" src="../../static/employment/templateBg4.png" mode="aspectFit"></image>
		</view>
		
		<!-- 课程列表-标题区 -->
		<view class="templateTitle">
			<text class="templateTitle3">就业指导系列课</text>
		</view>
		
		<!-- 大厂就业-课程导航 -->
		<view class="templateNav">
			<text 
				v-for="item in data.templateNav"
				:key="item.id"
				:class="['templateText',{'templateTextActive':data.currentId === item.id}]"
				@tap="selectTemplateNav(item)"
			>{{item.name}}</text>
		</view>
		
		<!-- 课程列表 -->
		<view class="templateCourseList">
			<!-- 每一项课程 -->
			<view 
				v-for="item in data.employmentCourseList"
				:key="item.id"
				class="templateCourseItem"
				@tap="goToCourseDetails(item.id)"
			>
				<!-- 左侧-放图片的 -->
				<view class="templateCourseItemLeft">
					<image class="templateCourseItemLeftImg" :src="item.cover" mode="aspectFit"></image>
				</view>
				<!-- 中间-放文字的 -->
				<view class="templateCourseItemMiddle">
					<view class="templateCourseItemMiddleTop">
						<text>{{item.name}}</text>
					</view>
					
					<view class="templateCourseItemMiddleTopTeacher">名师讲解</view>
					
					<!-- 课程简介 -->
					<view class="templateCourseItemMiddleIntro">
						<text>{{item.synopsis}}</text>
					</view>
					
					<view class="templateCourseItemMiddleBottom">
						<!-- 课程价格 -->
						<text class="templateCourseItemMiddleText1">￥{{item.sellPrice }}</text>
						<!-- 去上课按钮 -->
						<text class="templateCourseItemMiddleText2">去上课</text>
					</view>
					
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	import MediaSwiper from './components/MediaSwiper.vue'
	
	import { apiCourseDetail, apiCourseCatalogue, apiCompletedStudy,apiCourseList } from '@/api/goods'
	import { onLoad, onShow } from "@dcloudio/uni-app";
	
	onLoad((options: { id?: string }) => {
	  console.log('页面加载，参数:', options)
	  employmentCourseList('行业解读')
	})
	
	const ipt_content = ref("");
	const data = ref({
		currentId: 1,
		employmentCourseList:null,
		mediaList:[
			{
			    type: 'image',
			    url: '../../../static/employment/employment_banner1.png',
			    title: '图片1'
			  },
			  {
			    type: 'video',
			    url: 'https://video19.ifeng.com/video09/2024/05/23/p7199260608686989961-0-122707.mp4',
			    poster: '',
			    title: '视频1'
			  },
			  {
			    type: 'image',
			    url: '../../../static/employment/employment_banner2.png',
			    title: '图片2'
			  },
			  {
			    type: 'video',
			    url: 'https://video19.ifeng.com/video09/2024/05/23/p7199260608686989961-0-122707.mp4',
			    poster: '',
			    title: '视频2'
			  }
		],
		templateNav:[
			{ id:1, name:'行业解读'},
			{ id:2, name:'简历指导'},
			{ id:3, name:'面试指导'},
			{ id:4, name:'就业服务'},
			{ id:5, name:'测试数据1'},
			{ id:6, name:'测试数据2'},
		]
		
	})
	
	// 选择导航
	const selectTemplateNav = (item: any) =>{
		data.value.currentId = item.id
		employmentCourseList(item.name)
	}
	
	// 获取课程列表
	const employmentCourseList = async(category:any) => {
		const res = await apiCourseList({
			category:category,
		})
		console.log(res.lists)
		data.value.employmentCourseList = res.lists;
	}
	
	const goToCourseDetails = (id:any) => {
		uni.navigateTo({
			url:'/pages/courseDetails/courseDetails?id='+id
		})
	}
	
	// 跳转【简历模版-列表页】
	const gotToTemplateList = () =>{
		uni.navigateTo({
			url:"/pages/templateList/templateList"
		})
	}
	
	// 轮播的
	const handleMediaClick = (item: any) => {
	  console.log('点击了媒体:', item)
	  uni.showToast({
	    title: `点击了${item.type === 'image' ? '图片' : '视频'}: ${item.title}`,
	    icon: 'none'
	  })
	}
	
	
	

</script>

<style scoped>
.employment {
	width: 100%;
	background: #fff;
	height: 100%;
}
.nav {
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #fff;
	color: #7e8892;
	position: fixed;
	top: 0;
	left: 0;
}
.active {
	color: #000;
	font-size: 38rpx;
}
/* 轮播(图片或视频) */
.employmentSwiper {
	width: 100%;
	height: 400rpx;
	padding-top: 65rpx;
}

/* 四块简历模版-标题区 */
.templateTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 95%;
	height: 70rpx;
	margin: 20rpx 0 0 20rpx;
	border-radius: 12rpx;
	background: linear-gradient(to right, #2c8cfe, #edf5ff);
	font-weight: 700;
	padding: 0 20rpx;
	
}
/* 简历模版-文字 */
.templateTitle1 {
	display: flex;
	align-items: center;
	width: 50%;
	height: 100%;
	font-size: 34rpx;
	color: #fff;
}

/* 查看更多-文字 */
.templateTitle2 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex: 1;
	height: 100%;
	font-size: 25rpx;
	color: #425e88;
}

/* 四个简历模块-图 */
.template {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 200rpx;
	padding: 0 20rpx;
}
/* 简历模版图 */
.templateImage {
	height: 100%;
	margin: 0 10rpx;
}

/*大厂就业-课程导航 */
.templateNav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	min-width: 100%;
	height: 90rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	margin: 10rpx 0;
}
/* 去掉滚动条 */
.templateNav::-webkit-scrollbar {
	display: none;
}
/* 大厂就业-课程导航-文字 */
.templateText {
	flex:0 0 auto;
	padding: 15rpx 20rpx;
	color: #686868;
	background: #edf5ff;
	border-radius: 10rpx;
	margin-right: 15rpx;
}
.templateTextActive {
	color: #fff;
	background: #2c8cfe;
}

/* 就业指导就业课 - 文字 */
.templateTitle3 {
	display: flex;
	align-items: center;
	height: 100%;
	font-size: 34rpx;
	color: #fff;
}
/* 课程列表 */
.templateCourseList {
	display: flex;
	flex-direction: column;
	width: 95%;
	/* height: 100vh; */
	background: #f2f7fa;
	margin-left: 20rpx;
	border-radius: 10px 10px 0 0; /* 左上 右上 右下 左下 */
	padding: 20rpx;
}
	
/* 每一项课程 */
.templateCourseItem {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	height: 240rpx;
	background: #fff;
	border-radius: 26rpx;
	margin-bottom: 20rpx;
	padding: 16rpx;
}

/* 左边的图片 */
.templateCourseItemLeftImg {
	width: 220rpx;
	height: 100%;
	margin-right: 25rpx;
	border-radius: 26rpx;
}

/* 中间-放文字的 */
.templateCourseItemMiddle {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 65%;
}
/* 中间上面的文字：课程标题 */
.templateCourseItemMiddleTop {
	width: 95%;
	margin-bottom: 8rpx;
}
/* 课程标题 - 样式*/
.templateCourseItemMiddleTop text {
	font-size: 30rpx;
	color: rgba(63, 81, 105, 1);
	font-weight: bold;
	margin-right: 20rpx;
}
/* 名师讲解-文字样式 */
.templateCourseItemMiddleTopTeacher {
	color: rgba(44, 140, 253, 1);
	background: rgba(219, 236, 255, 1);
	padding: 5rpx 30rpx;
	border-radius: 16rpx;
	border: 1px solid rgba(44, 140, 253, 1);
	font-size: 24rpx;
	margin-bottom: 10rpx;
}
/* 课程简介 */
.templateCourseItemMiddleIntro {
	width: 95%;
	color:rgba(153, 153, 153, 1) ;
	font-size: 24rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 10rpx;
	margin-bottom: 30rpx;
}

/* 中间下面的文字 */
.templateCourseItemMiddleBottom {
	width: 95%;
	display: flex;
	justify-content: space-between;
	padding-right: 30rpx;
}
/* 文字：课程价格 */
.templateCourseItemMiddleText1 {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	color: #f00;
	font-weight: bold;
}
/* 去上课按钮 */
.templateCourseItemMiddleText2 {
	color: #fff;
	background: rgba(44, 140, 253, 1);
	border-radius: 30rpx;
	padding: 5rpx 25rpx;
}
</style>
